<template>
  <view class="user pageBg">
    <view :style="{ height: `${getNavBarHeight()}px` }"></view>
    <uv-skeletons :loading="loading" :skeleton="skeleton">
      <view class="userInfo">
        <view class="avatar">
          <image src="@/static/xxmLogo.png" mode="aspectFill" />
        </view>
        <view class="ip">{{ userInfo?.IP }}</view>
        <view class="address">来自于：{{ address }}</view>
      </view>

      <view class="section">
        <view class="list">
          <row-item
            v-for="item in sectionsTop"
            :key="item.label"
            :icon="item.icon"
            :label="item.label"
            :num="item.num"
            :isContact="item.isContact"
            @onNavigator="item.navigator"
          ></row-item>
        </view>
      </view>
      <view class="section">
        <view class="list">
          <row-item
            v-for="item in sectionsBottom"
            :key="item.label"
            :icon="item.icon"
            :label="item.label"
            :num="item.num"
            :isContact="item.isContact"
            @onNavigator="item.navigator"
          ></row-item>
        </view>
      </view>
    </uv-skeletons>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, type ComputedRef } from 'vue';
import type { UserInfo } from '@/api/user';
import { apiUserInfo } from '@/api/user';
import { getNavBarHeight } from '@/utils/system';
interface SectionItem {
  label: string;
  icon: string;
  num?: number;
  isContact?: boolean;
  navigator?: () => void;
}
const loading = ref(false);
const userInfo = ref<UserInfo>();
const address: ComputedRef<string> = computed(() => {
  if (!userInfo.value?.address) {
    return '未知';
  }
  // 国 - 省 - 市
  const list = ['country', 'province', 'city'];
  return list
    .map(key => userInfo.value.address[key])
    .filter(i => i && i !== '-')
    .join('-');
});

const sectionsTop: ComputedRef<SectionItem[]> = computed(() => {
  return [
    {
      label: '我的下载',
      icon: 'download-filled',
      num: userInfo.value?.downloadSize || 0,
      navigator: () => {
        uni.navigateTo({
          url: '/pages/classifyList/classifyList?name=我的下载&type=download',
        });
      },
    },
    {
      label: '我的评分',
      icon: 'star-filled',
      num: userInfo.value?.scoreSize || 0,
      navigator: () => {
        uni.navigateTo({
          url: '/pages/classifyList/classifyList?name=我的评分&type=score',
        });
      },
    },
    {
      label: '联系客服',
      icon: 'chatboxes-filled',
      isContact: true,
    },
  ];
});
// 在非H5的场景下增加配置
const sectionsBottom: SectionItem[] = [
  {
    label: '订阅更新',
    icon: 'notification-filled',
    navigator: () => {
      uni.navigateTo({
        url: '/pages/notice/detail?id=653507c6466d417a3718e94b&name=订阅更新',
      });
    },
  },
  {
    label: '常见问题',
    icon: 'flag-filled',
    navigator: () => {
      uni.navigateTo({
        url: '/pages/notice/detail?id=6536358ce0ec19c8d67fbe82&name=常见问题',
      });
    },
  },
];

const skeleton = [
  50,
  {
    type: 'avatar',
    num: 1,
    style: 'margin: 0 auto;width: 160rpx;height: 160rpx;border-radius: 50%;',
  },
  30,
  {
    type: 'line',
    num: 2,
    gap: '20rpx',
    style: ['width: 400rpx;margin: 0 auto;height: 50rpx;', 'width: 400rpx;margin: 0 auto;'],
  },
  100,
  {
    type: 'line',
    num: 1,
    style: ['width: 690rpx;margin: 0 auto;height: 300rpx;'],
  },
  50,
  {
    type: 'line',
    num: 1,
    style: ['width: 690rpx;margin: 0 auto;height: 200rpx;'],
  },
];

const getUserInfo = async () => {
  loading.value = true;
  const res = await apiUserInfo();
  loading.value = false;
  userInfo.value = res.data;
};

getUserInfo();
</script>

<style lang="scss" scoped>
.user {
  .userInfo {
    padding: 50rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .ip {
      font-size: 44rpx;
      color: #333;
      padding: 20rpx 0 5rpx;
    }

    .address {
      font-size: 28rpx;
      color: #aaa;
    }
  }

  .section {
    width: 690rpx;
    margin: 50rpx auto;
    border: 1px solid #eee;
    border-radius: 10rpx;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
  }
}
</style>
